<template>
  <div>
    <MyHeader style="margin-bottom: 50px" :key="componentKey"></MyHeader>
    <RightShow></RightShow>
    <!--    修改资料-->
    <div style="margin-left: 70px;">
      <div style="font-size: 22px;border-bottom: 1px solid rgb(0,0,0,0.2);width: 1100px;margin-bottom: 20px">我的信息</div>
      <div class="Via" style="display: flex;align-items: center;margin-bottom: 80px">
        <div class="oldIcon">
          <img :src="imageUrl" alt="" style="border-radius: 50%;width: 300px;height: 300px">
        </div>
        <div>
          <el-upload
              :on-change="change"
              ref="upload"
              :auto-upload="false"
              name="files"
              class="avatar-uploader"
              :action="http"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon">更换头像</i>
          </el-upload>
        </div>
      </div>
      <div style="height: 50px;margin-top: -60px;margin-bottom: 50px">
        <!--      保存头像-->
        <el-row>
          <el-button type="primary"  @click="Submit">保存</el-button>
        </el-row>
      </div>
      <!--      个人信息-->
      <div style="display: flex;flex-direction: column">
        <label>你的用户名</label>
        <el-input
            type="text"
            placeholder="请输入内容"
            v-model="userName"
            maxlength="10"
            show-word-limit
            style="width: 500px;">
        </el-input>
        <label style="margin-top: 20px">个人简介</label>
        <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入内容,虽然写了也没有用"
            v-model="textarea" style="width: 800px;">
        </el-input>
      </div>
      <el-row style="margin-top: 20px">
        <el-button type="success" :disabled="isChange" @click="updateInfo" >保存</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import RightShow from "@/components/RightShow";
export default {
  name: "EditUser",
  components: {
    MyHeader,
    RightShow
  },
  data() {
    return {
      userName: '',
      textarea: '',
      id: this.$store.state.commitSum.userID,
      imageUrl: "",
      oldName:'',
      oldText:'',
      componentKey: 0
    }
  },
  computed: {
    http() {
      return "http://127.0.0.1:5000/user/userIcon?id=" + this.id
    },
    isChange(){
      
      return (this.oldName === this.userName && this.oldText === this.textarea);
    }
  },
 
 mounted() {
    //获取用户的头像
    this.$api.userApi.userGetIcon({id: this.$store.state.commitSum.userID}).then(value => {
      console.log(value.user_icon)
      if (value.user_icon) {
        this.imageUrl = value.user_icon
      } else {
        this.imageUrl = require('../../public/img/Myphoto.jpg')
      }
    })
    //初始化用户信息
    this.$api.userApi.userInfo({id:this.$store.state.commitSum.userID}).then(value=>{
      console.log(value)
      this.userName=value.result.user_name
      this.textarea=value.result.about_us
      this.oldName=value.result.user_name
      this.oldText=value.result.about_us
    })
  },
  methods: {
    change(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      
    },
    Submit() {
      this.$refs.upload.submit()
      this.$message({
        message: '头像修改成功',
        type: 'success'
      })
      //将vuex的图片换成上传后的
      this.componentKey++;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log()
      // let formData=new FormData()
      // formData.append('file',file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //保存用户的信息
    updateInfo(){
      this.componentKey++
      this.$api.userApi.updateInfo({id:this.$store.state.commitSum.userID,userName:this.userName,aboutUs:this.textarea}).then(()=>{
        this.$message(
            {
              message:'修改成功',
              type:'success'
            }
        )
        
       
      })
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>